﻿import QtQuick 2.0

// 图表曲线管理 (请搭配C++食用)
// 这个版本的图表根据需求改了一部分，不要乱复制(｀・ω・´)
Rectangle{

    id: root

    // public ========================================================

    property var cChartInterface: CChart       // 在此传入C++注册进来的图表，来和前端图表绑定

    property string xTitle: "横坐标"        // 坐标轴标题，为空时不显示
    property string yTitle: "纵坐标"

    // 坐标轴保留小数点位数
    property int  decimalX: 0
    property int  decimalY: 0

    // 坐标轴分段数(-1表示默认)
    property int  tickCountY: -1
    property int  tickCountX: Math.ceil(maxX/60)

    property real fontsize: config.fontsize - 2*dp

    property real margin: 10*dp

    // private =======================================================

    // 从后端传回来的数据
    property var curveList: []
    property real minX: 0
    property real maxX: 0
    property real minY: 0
    property real maxY: 0

    property var curveInfo  // 用来存放后端传回来的曲线


    // 坐标轴分段  [TODO] 用户可固定分段数
    property var axisXTick: [0, 0.2, 0.4, 0.6, 0.8, 1]
    property var axisYTick: [0, 0.2, 0.4, 0.6, 0.8, 1]
    function calAxisXTick(){
        axisXTick = []
        if(tickCountX > 0){
            for(let i = 0; i <= tickCountX; i ++){
                axisXTick.push(i/tickCountX)
            }
        }else if(maxX-minX <= 10){
            for(let i = 0; i <= maxX-minX; i ++){
                axisXTick.push(i/(maxX-minX))
            }
        }else{
            let gap = Math.ceil((maxX-minX) / 10)
            for(let i = 0; i <= maxX-minX; i += gap){
                axisXTick.push(i/(maxX-minX))
            }
            if(axisXTick[axisXTick.length-1] < 1){
                axisXTick.push(1)
            }
        }
        root.axisXTickChanged()
    }
    function calAxisYTick(){
        axisYTick = []
        if(maxY-minY <= 10){
            for(let i = 0; i <= maxY-minY; i ++){
                axisYTick.push(i/(maxY-minY))
            }if(axisYTick[axisYTick.length-1] < 1){
                axisYTick.push(1)
            }
        }else{
            axisYTick = [0, 0.2, 0.4, 0.6, 0.8, 1]
        }
        root.axisYTickChanged()
    }

    // 坐标轴尺寸
    property int axisSizeL: axisYWidth     // (给坐标轴标题留的地方
    property int axisSizeB: axisXHeight
    property int legendHeight: 0
    property real axisXHeight: 60
    property real axisYWidth: text_axisY_max.contentWidth + 50

    // 用来算坐标轴留多大空间的
    Text{ id: text_maxX; text: maxX.toFixed(decimalY); font.pixelSize: root.fontsize; visible: false }
    Text{ id: text_maxY; text: maxY.toFixed(decimalX); font.pixelSize: root.fontsize; visible: false }

    property real   leftMargin: margin + (yTitle==="" ? 0 : fontsize+2*dp) + (text_maxY.contentWidth)
    property real   bottomMargin: margin + (xTitle===""? 0 : fontsize+2*dp) + (fontsize)
    property real   rightMargin: margin + (text_maxX.contentWidth * 0.5)
    property real   topMargin: margin

    Connections{
        target: cChartInterface
        onSigRefresh: {
            refreshData()
        }
    }
    function refreshData(){     // 刷新从后端获取的数据

        curveInfo = cChartInterface.getCurveInfo()

        curveList = curveInfo["CurveList"]
        minX = curveInfo["MinX"]
        minY = curveInfo["MinY"]
        maxX = curveInfo["MaxX"]
        maxY = curveInfo["MaxY"]

        calAxisXTick()
        calAxisYTick()

        canvas.requestPaint()
    }

    // layout =========================================================
    // 图表
    Canvas{
        id: canvas
        x: leftMargin; y: topMargin
        width: parent.width - leftMargin - rightMargin
        height: parent.height - topMargin - bottomMargin
        onPaint: {

            let ctx = canvas.getContext("2d")
            ctx.clearRect(0, 0, width, height)

            for(let i = 0; i < curveList.length; i ++){
                let curve = curveList[i]["NormPointList"]
                let bezier = curveList[i]["BezierPointList"]
                let cColor = curveList[i]["Color"]
                let cWidth = curveList[i]["LineWidth"]

                if(curve.length === 2){
                    ctx.beginPath()
                    ctx.fillStyle = cColor
                    ctx.arc(curve[0]*width, height-curve[1]*height, cWidth*2, 0, 2*Math.PI)
                    ctx.fill()
                    continue
                }

                ctx.beginPath()
                if(curve.length===0){
                    return
                }
                ctx.moveTo(curve[0]*width, height-curve[1]*height)
                for(let c = 2; c < curve.length; c +=2){
                    ctx.bezierCurveTo(bezier[(c-2)*2]*width, height-bezier[(c-2)*2+1]*height,     // 控制点1
                                      bezier[(c-2)*2+2]*width, height-bezier[(c-2)*2+3]*height,     // 控制点2
                                      curve[c]*width, height-curve[c+1]*height)               // 目标点

                }
                ctx.strokeStyle = cColor
                ctx.lineWidth = cWidth
                ctx.stroke()
            }

        }
    }
    // 坐标轴标题
    Text{       // 纵坐标Y(左)
        text: yTitle
        rotation: -90
        anchors.centerIn: canvas
        anchors.horizontalCenterOffset: -canvas.width/2 - fontsize*0.6 - text_maxY.contentWidth - 3*dp
        font.pixelSize: fontsize
        font.bold: true
        color: Qt.rgba(0, 0, 0, 0.7)
    }
    Text{       // 横坐标X(底)
        text: xTitle
        anchors.centerIn: canvas
        anchors.verticalCenterOffset: canvas.height/2 + fontsize * 1.6 + 3*dp
        color: Qt.rgba(0, 0, 0, 0.7)
        font.pixelSize: fontsize
        font.bold: true
    }
    // 最下面坐标轴的线
    Rectangle{      // 横坐标
        height: 1.6; width: canvas.width
        x: leftMargin; y: parent.height - bottomMargin
        color: Qt.rgba(0, 0, 0, 0.15)
    }
    // 纵坐标没线

    // 坐标轴数字和线
    // Y轴线
    Repeater{
        model: axisYTick
        Rectangle{
            x: leftMargin;  y: topMargin + canvas.height * (1-modelData)
            width: canvas.width;  height: 1
            color: Qt.rgba(0, 0, 0, 0.1)
            Text{
                x: -contentWidth-3
                anchors.verticalCenter: parent.verticalCenter
                text: (maxY * modelData).toFixed(decimalX).toString()
                font.pixelSize: fontsize-2
                color: Qt.rgba(0, 0, 0, 0.5)
            }
        }
    }
    // x轴（没有线）
    Repeater{
        model: axisXTick
        Rectangle{
            x: leftMargin + canvas.width * modelData;  y: topMargin + canvas.height
            width: 1;   height: 5
            color: Qt.rgba(0, 0, 0, 0.15)
            Text{
                y: 2
                anchors.horizontalCenter: parent.horizontalCenter
                text: (((maxX-minX)*modelData+minX) / 60).toFixed(0)
                font.pixelSize: fontsize-2
                color: Qt.rgba(0, 0, 0, 0.5)
            }
        }
    }

}
